<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }
    .layui-form-item .layui-inline {
        margin-bottom: 5px;
        margin-right: 0px;
    }
    .layui-form-pane .layui-form-label {
        width: 90px;
    }
    .layui-form-item .layui-input-inline {
        width: 170px;
    }
</style>

<body>
<div class="ok-body">

    <div class="layui-row" style="margin-top: 15px">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item" style="margin-bottom: 5px;">
                <div class="layui-inline">
                    <label class="layui-form-label">配件名称</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" name="name" class="layui-input" />
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">物料编号</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" name="number" class="layui-input" />
                    </div>
                </div>

            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">平均寿命</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" name="avgLife" maxlength="10" class="layui-input" />
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">配件类型</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <select name="type" lay-search>
                            <option value=""></option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">备件等级</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <select name="level">
                            <option value=""></option>
                            <option value="1">关键</option>
                            <option value="2">普通</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn  layui-btn-normal" style="margin-left: 10px" lay-submit lay-filter="search">搜索
                    </button>

                    <span>
                        <button type="button" class="layui-btn layui-btn-warm" id="add" style="float: right;margin-left: 5px;">新增</button>
                        <button type="button" class="layui-btn layui-btn-danger" id="delete" style="float: right;margin-left: 60px;">删除</button>
                    </span>
                </div>

            </div>
        </form>
    </div>

    <hr class="layui-bg-orange">

    <table class="layui-hide" id="component" lay-filter="component"></table>
    <!--分页Div-->
    <div id="pageDiv"></div>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    layui.use(['table', 'laypage', 'form'], function () {

        var table = layui.table;
        var form = layui.form;

        JJZ.initSelect(JJZ.named('type'), '/componentType/dataGrid', function (noError) {
            form.render();
        });

        var tableName = 'component';

        var tableRenderObject = {
            elem: '#' + tableName
            , title: '零件'
            , tableName: tableName
            , searchCol: ''
            , searchValue: ''
            ,defaultToolbar: ['filter', 'print']
            ,toolbar: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'number', title: '物料编号', align: 'center',minWidth:87,width:87}
                , {field: 'name', title: '配件名称', align: 'center'}
                , {field: 'avgLife', title: '平均寿命', align: 'center',minWidth:87,width:87}
                , {field: 'unit', title: '单位', align: 'center',width:60}
                , {field: 'price', title: '单价', align: 'center',width:74}
                , {field: 'typeName', title: '类型', align: 'center',minWidth:116}
                , {field: 'minReserve', title: '最低库存', align: 'center',minWidth:87,width:87}
                , {field: 'maxReserve', title: '最高库存', align: 'center',minWidth:87,width:87}
                , {title: '备件等级', align: 'center',minWidth:87,width:87, templet: function (d) {
                        if (d.level === 1) {
                            return '关键备件';
                        } else if (d.level === 2) {
                            return '普通备件';
                        } else {
                            return '暂无';
                        }
                    }
                }
                , {field: 'creatorName', title: '创建者', align: 'center',width:73}
                , {field: 'gmtCreate', title: '创建日期', align: 'center',minWidth:103, templet: function (d) {
                        return JJZ.FormatDate(d.gmtCreate, 'yyyy-MM-dd');
                    }
                }
                , {
                    fixed: 'right', align: 'center', title: '操作',width:61, templet: function (d) {
                        return '<a href="javascript:JJZ.editPage(\'' + tableName + '\',' + d.id + ')" class="layui-table-link">编辑</a>';
                    }
                }
            ]]
        };

        var myTable = new JJZ.MyTable(tableRenderObject);

        form.on('submit(search)', function (data) {
            if(data.field.avgLife && data.field.avgLife!=''){
                var pattern = /^[1-9]\d*$/g;
                if( pattern.test(data.field.avgLife) === false){
                    layer.msg('平均寿命必须为正整数!!!');
                    return false;
                }
            }
            var encodeStr = $.base64.encode(JSON.stringify(data.field), 'utf-8');
            var param = 'json=' + encodeURIComponent(encodeStr);
            tableRenderObject.initParam = param;
            myTable.render();
            return false;
        });


        //新增，跳转至页面
        $('#add').click(function () {
            myTable.add();
        });

        //批量删除数据
        $('#delete').click(function () {
            var checkStatus = table.checkStatus('component') //idTest 即为基础参数 id 对应的值
                , data = checkStatus.data; //获取选中的数据
            layer.confirm('确认删除？', function (index) {
                myTable.delete(data);
                myTable.render();
                layer.close(index);
            });
        });

    });

</script>
</body>
</html>